<template>
  <router-link :to="'detail/'+storeItem.id" tag="div" class="store_item">
    <div class="store_img">{{storeItem.store_img}}</div>
    <div class="store_abstract">
      <div class="store_title ellipsis">{{storeItem.store_title}}</div>
      <div class="store_sales_info">
        <span class="start">★</span><span class="points">{{storeItem.points}}</span>
        <span>月售</span><span class="sales_counts">{{storeItem.sales_counts}}</span>
      </div>
      <div class="delivery_info">
        <span>起送￥</span><span class="min_price_1">{{storeItem.min_price_1}}</span>&nbsp;
        <span>夜间配送￥</span><span class="min_price_2">{{storeItem.min_price_2}}</span>
        <span class="origin_price">{{storeItem.origin_price}}</span>

        <span class="time_distance">
          <span class="time_number">{{storeItem.time_number}}</span>分钟&nbsp;
          <span class="distance_number">{{storeItem.distance_number}}</span>km
        </span>
      </div>
      <div class="discount_tags">
        <span class="tag" v-for="x in storeItem.tags" :key="x">{{x}}</span>
      </div>
    </div>
  </router-link>
</template>

<script>
  export default {
    data: function () {
      return {}
    },
    props: ['storeItem']
  }
</script>

<style scoped lang="scss">
  .store_item {
    font-size: 0;

    $top-distance: 20px;

    .store_img {
      display: inline-block;
      width: 80px;
      height: 80px;
      margin-top: $top-distance;
      border-radius: 5px;
      background-color: #eee;

      text-align: center;
      line-height: 80px;
      font-size: 1.6rem;
    }

    .store_abstract {
      padding: $top-distance 0;
      font-size: 1.6rem;
      display: inline-block;
      vertical-align: top;
      width: calc(100% - 80px - 10px);
      margin-left: 10px;

      border-bottom: 1px silver solid;

      .store_title {
        padding-right: 10px;
        font-size: 1.8rem;
        font-weight: bold;
      }

      .store_sales_info {
        color: #666;
        font-size: 1.2rem;
        padding: 5px 0;

        .start {
          color: red;
          font-size: 1.8rem;
        }

        .points {
          color: red;
          padding: 0 15px 0 5px;
        }
      }

      .delivery_info {
        color: #666;
        font-size: 1.2rem;

        .origin_price {
          color: #999;
          text-decoration: line-through;
        }

        .time_distance {
          float: right;
        }
      }

      .discount_tags {
        display: inline-block;
        font-size: 1.2rem;
        margin: 15px 0 0 0;
        color: red;
        height: 26px;

        .tag {
          border: #ff9981 solid 1px;
          padding: 3px 2px;
          margin: 0 3px;
        }
      }
    }
  }
</style>
